<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地铁线路性质管理工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF',
                        danger: '#F53F3F',
                        warning: '#FF7D00',
                        success: '#00B42A'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-lift {
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .hover-lift:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen text-dark">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-subway text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">地铁线路性质管理工具</h1>
            </div>
            <div id="header-actions" class="hidden md:flex items-center space-x-4">
                <button id="import-btn" class="flex items-center space-x-1 px-3 py-1.5 text-sm bg-white border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
                    <i class="fa fa-upload"></i>
                    <span>导入数据</span>
                </button>
                <button id="clear-all-btn" class="flex items-center space-x-1 px-3 py-1.5 text-sm bg-white border border-danger text-danger rounded-md hover:bg-danger/5 transition-colors">
                    <i class="fa fa-trash"></i>
                    <span>清空数据</span>
                </button>
                <a href="http://aarc.jowei19.com" target="_blank" class="flex items-center space-x-1 px-3 py-1.5 text-sm bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors">
                    <i class="fa fa-paint-brush"></i>
                    <span>前往绘制器</span>
                </a>
            </div>
            <button id="mobile-menu-btn" class="md:hidden text-dark p-2">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
                <button id="mobile-import-btn" class="flex items-center space-x-1 px-3 py-2 text-sm justify-start">
                    <i class="fa fa-upload text-primary"></i>
                    <span>导入数据</span>
                </button>
                <button id="mobile-clear-all-btn" class="flex items-center space-x-1 px-3 py-2 text-sm justify-start text-danger">
                    <i class="fa fa-trash"></i>
                    <span>清空数据</span>
                </button>
                <a href="http://aarc.jowei19.com" target="_blank" class="flex items-center space-x-1 px-3 py-2 text-sm justify-start text-secondary">
                    <i class="fa fa-paint-brush"></i>
                    <span>前往绘制器</span>
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 主页视图 -->
        <div id="home-view" class="space-y-8">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h2 class="text-2xl font-bold">线路管理</h2>
                    <p class="text-gray-500 mt-1">管理您的地铁线路组和线路属性</p>
                </div>
                <div class="flex flex-wrap gap-3 w-full md:w-auto">
                    <button id="create-line-btn" class="flex items-center space-x-2 px-4 py-2 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors shadow-sm" disabled="">
                        <i class="fa fa-plus-circle"></i>
                        <span>新建线路</span>
                    </button>
                    <button id="create-group-btn" class="flex items-center space-x-2 px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow-sm">
                        <i class="fa fa-folder-open-o"></i>
                        <span>新建线路组</span>
                    </button>
                </div>
            </div>

            <!-- 线路组容器 -->
            <div id="groups-container" class="space-y-8">
                <div class="text-center text-gray-500 py-12">
                    <i class="fa fa-folder-open-o text-4xl mb-3 opacity-30"></i>
                    <p>暂无线路组，请点击"新建线路组"开始</p>
                </div>
            </div>
        </div>

        <!-- 线路编辑视图 -->
        <div id="line-edit-view" class="hidden space-y-6">
            <div class="flex items-center space-x-2 text-sm">
                <button id="back-to-home" class="flex items-center space-x-1 text-primary hover:text-primary/80 transition-colors">
                    <i class="fa fa-arrow-left"></i>
                    <span>返回主页</span>
                </button>
                <span class="text-gray-400">/</span>
                <span id="current-group-name" class="text-gray-600"></span>
                <span class="text-gray-400">/</span>
                <span id="current-line-name" class="font-medium"></span>
            </div>

            <div class="bg-white rounded-xl p-6 card-shadow">
                <div class="flex justify-between items-start mb-6">
                    <div>
                        <h2 class="text-xl font-bold">编辑线路属性</h2>
                        <p class="text-gray-500 mt-1">设置线路的详细属性信息</p>
                    </div>
                    <button id="export-line-btn" class="flex items-center space-x-1 px-3 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                        <i class="fa fa-download"></i>
                        <span>导出JSON</span>
                    </button>
                </div>

                <form id="line-form" class="space-y-6">
                    <input type="hidden" id="line-id">
                    <input type="hidden" id="group-id">

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 线路名称 -->
                        <div class="space-y-2">
                            <label for="line-name" class="block text-sm font-medium text-gray-700">线路名称 <span class="text-danger">*</span></label>
                            <input type="text" id="line-name" name="line-name" required="" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
                        </div>

                        <!-- 线路颜色 -->
                        <div class="space-y-2">
                            <label for="line-color" class="block text-sm font-medium text-gray-700">线路颜色 <span class="text-danger">*</span></label>
                            <div class="flex items-center space-x-3">
                                <input type="color" id="line-color" name="line-color" value="#165DFF" class="w-10 h-10 p-0 border-0 rounded cursor-pointer">
                                <input type="text" id="line-color-text" value="#165DFF" class="flex-1 px-3 py-2 border border-gray-300 rounded-md input-focus">
                            </div>
                        </div>

                        <!-- 车厢型号 -->
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">车厢型号 <span class="text-danger">*</span></label>
                            <div class="grid grid-cols-3 gap-2">
                                <div class="relative">
                                    <input type="radio" id="car-type-A" name="car-type" value="A" checked="" class="peer sr-only">
                                    <label for="car-type-A" class="block text-center px-3 py-2 border border-gray-300 rounded-md cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-colors">
                                        A型
                                    </label>
                                </div>
                                <div class="relative">
                                    <input type="radio" id="car-type-B" name="car-type" value="B" class="peer sr-only">
                                    <label for="car-type-B" class="block text-center px-3 py-2 border border-gray-300 rounded-md cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-colors">
                                        B型
                                    </label>
                                </div>
                                <div class="relative">
                                    <input type="radio" id="car-type-C" name="car-type" value="C" class="peer sr-only">
                                    <label for="car-type-C" class="block text-center px-3 py-2 border border-gray-300 rounded-md cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-colors">
                                        C型
                                    </label>
                                </div>
                                <div class="relative">
                                    <input type="radio" id="car-type-D" name="car-type" value="D" class="peer sr-only">
                                    <label for="car-type-D" class="block text-center px-3 py-2 border border-gray-300 rounded-md cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-colors">
                                        D型
                                    </label>
                                </div>
                                <div class="relative">
                                    <input type="radio" id="car-type-L" name="car-type" value="L" class="peer sr-only">
                                    <label for="car-type-L" class="block text-center px-3 py-2 border border-gray-300 rounded-md cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-colors">
                                        L型
                                    </label>
                                </div>
                                <div class="relative">
                                    <input type="radio" id="car-type-custom" name="car-type" value="custom" class="peer sr-only">
                                    <label for="car-type-custom" class="block text-center px-3 py-2 border border-gray-300 rounded-md cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-colors">
                                        自定义
                                    </label>
                                </div>
                            </div>
                            <div id="custom-car-type-container" class="hidden mt-2">
                                <input type="text" id="custom-car-type" placeholder="请输入自定义车厢型号" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
                            </div>
                        </div>

                        <!-- 车厢数 -->
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <label class="block text-sm font-medium text-gray-700">车厢数 <span class="text-danger">*</span></label>
                                <div class="flex items-center space-x-1">
                                    <input type="checkbox" id="mixed-train" name="mixed-train" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                                    <label for="mixed-train" class="text-sm text-gray-600">混跑</label>
                                </div>
                            </div>
                            <div id="single-train-count" class="space-y-2">
                                <input type="number" id="car-count" name="car-count" min="1" required="" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus" placeholder="请输入车厢数量">
                            </div>
                            <div id="mixed-train-counts" class="hidden grid grid-cols-2 gap-3">
                                <input type="number" id="car-count-1" name="car-count-1" min="1" class="px-3 py-2 border border-gray-300 rounded-md input-focus" placeholder="车厢数量1">
                                <input type="number" id="car-count-2" name="car-count-2" min="1" class="px-3 py-2 border border-gray-300 rounded-md input-focus" placeholder="车厢数量2">
                            </div>
                        </div>

                        <!-- 最高运营时速 -->
                        <div class="space-y-2">
                            <label for="max-speed" class="block text-sm font-medium text-gray-700">最高运营时速 <span class="text-danger">*</span></label>
                            <div class="flex">
                                <input type="number" id="max-speed" name="max-speed" min="1" required="" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md input-focus" placeholder="请输入最高时速">
                                <span class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md">
                                    km/h
                                </span>
                            </div>
                        </div>

                        <!-- 所属运营公司 -->
                        <div class="space-y-2">
                            <label for="operator" class="block text-sm font-medium text-gray-700">所属运营公司 <span class="text-danger">*</span></label>
                            <input type="text" id="operator" name="operator" required="" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus" placeholder="请输入运营公司名称">
                        </div>
                    </div>

                    <div class="flex justify-end space-x-3 pt-4 border-t border-gray-100">
                        <button type="button" id="delete-line-btn" class="px-4 py-2 border border-danger text-danger rounded-md hover:bg-danger/5 transition-colors">
                            <i class="fa fa-trash mr-1"></i> 删除线路
                        </button>
                        <button type="button" id="cancel-edit-btn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                            保存修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t mt-12 py-6">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>地铁线路性质管理工具 © 2025</p>
        </div>
    </footer>

    <!-- 模态框 - 新建线路组 -->
    <div id="create-group-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl w-full max-w-md p-6 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold">新建线路组</h3>
                <button id="close-group-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="create-group-form" class="space-y-4">
                <div>
                    <label for="group-name" class="block text-sm font-medium text-gray-700 mb-1">线路组名称 <span class="text-danger">*</span></label>
                    <input type="text" id="group-name" required="" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
                </div>
                <div class="pt-2 flex justify-end space-x-3">
                    <button type="button" id="cancel-group-btn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                        创建
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 模态框 - 新建线路 -->
    <div id="create-line-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl w-full max-w-md p-6 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold">新建线路</h3>
                <button id="close-line-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="create-line-form" class="space-y-4">
                <div>
                    <label for="new-line-name" class="block text-sm font-medium text-gray-700 mb-1">线路名称 <span class="text-danger">*</span></label>
                    <input type="text" id="new-line-name" required="" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
                </div>
                <div>
                    <label for="line-group-select" class="block text-sm font-medium text-gray-700 mb-1">所属线路组 <span class="text-danger">*</span></label>
                    <select id="line-group-select" required="" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
                        <!-- 动态填充线路组 -->
                    </select>
                </div>
                <div class="pt-2 flex justify-end space-x-3">
                    <button type="button" id="cancel-line-btn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors">
                        创建
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 模态框 - 确认删除 -->
    <div id="confirm-delete-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl w-full max-w-md p-6 transform transition-all">
            <div class="text-center mb-4">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-danger/10 text-danger mb-4">
                    <i class="fa fa-exclamation-triangle text-xl"></i>
                </div>
                <h3 class="text-lg font-bold">确认删除</h3>
                <p class="text-gray-500 mt-2" id="delete-confirm-message">您确定要删除吗？此操作无法撤销。</p>
            </div>
            <div class="pt-2 flex justify-center space-x-3">
                <button id="cancel-delete-btn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="confirm-delete-btn" class="px-4 py-2 bg-danger text-white rounded-md hover:bg-danger/90 transition-colors">
                    确认删除
                </button>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="toast-notification" class="fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center space-x-2 max-w-xs">
        <i id="toast-icon" class="fa fa-check-circle text-success text-xl"></i>
        <span id="toast-message">操作成功</span>
    </div>

    <script>
        // 数据存储
        let metroData = {
            groups: [],
            lines: []
        };

        // DOM 元素
        const homeView = document.getElementById('home-view');
        const lineEditView = document.getElementById('line-edit-view');
        const groupsContainer = document.getElementById('groups-container');
        const createGroupBtn = document.getElementById('create-group-btn');
        const createLineBtn = document.getElementById('create-line-btn');
        const backToHomeBtn = document.getElementById('back-to-home');
        const createGroupModal = document.getElementById('create-group-modal');
        const closeGroupModal = document.getElementById('close-group-modal');
        const cancelGroupBtn = document.getElementById('cancel-group-btn');
        const createGroupForm = document.getElementById('create-group-form');
        const createLineModal = document.getElementById('create-line-modal');
        const closeLineModal = document.getElementById('close-line-modal');
        const cancelLineBtn = document.getElementById('cancel-line-btn');
        const createLineForm = document.getElementById('create-line-form');
        const lineGroupSelect = document.getElementById('line-group-select');
        const lineForm = document.getElementById('line-form');
        const cancelEditBtn = document.getElementById('cancel-edit-btn');
        const deleteLineBtn = document.getElementById('delete-line-btn');
        const exportLineBtn = document.getElementById('export-line-btn');
        const lineColorInput = document.getElementById('line-color');
        const lineColorTextInput = document.getElementById('line-color-text');
        const carTypeCustomRadio = document.getElementById('car-type-custom');
        const customCarTypeContainer = document.getElementById('custom-car-type-container');
        const mixedTrainCheckbox = document.getElementById('mixed-train');
        const singleTrainCount = document.getElementById('single-train-count');
        const mixedTrainCounts = document.getElementById('mixed-train-counts');
        const confirmDeleteModal = document.getElementById('confirm-delete-modal');
        const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
        const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
        const importBtn = document.getElementById('import-btn');
        const mobileImportBtn = document.getElementById('mobile-import-btn');
        const clearAllBtn = document.getElementById('clear-all-btn');
        const mobileClearAllBtn = document.getElementById('mobile-clear-all-btn');
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const toastNotification = document.getElementById('toast-notification');
        const toastIcon = document.getElementById('toast-icon');
        const toastMessage = document.getElementById('toast-message');

        // 当前编辑的线路ID和组ID
        let currentLineId = null;
        let currentGroupId = null;
        let deleteTarget = null; // 用于确认删除的目标 ('line' 或 'group' 及其ID)

        // 初始化
        function init() {
            loadData();
            renderGroups();
            setupEventListeners();
        }

        // 从本地存储加载数据
        function loadData() {
            const savedData = localStorage.getItem('metroLineData');
            if (savedData) {
                metroData = JSON.parse(savedData);
            }
            updateCreateLineButtonState();
        }

        // 保存数据到本地存储
        function saveData() {
            localStorage.setItem('metroLineData', JSON.stringify(metroData));
        }

        // 渲染线路组
        function renderGroups() {
            if (metroData.groups.length === 0) {
                groupsContainer.innerHTML = `
                    <div class="text-center text-gray-500 py-12">
                        <i class="fa fa-folder-open-o text-4xl mb-3 opacity-30"></i>
                        <p>暂无线路组，请点击"新建线路组"开始</p>
                    </div>
                `;
                return;
            }

            groupsContainer.innerHTML = '';
            
            metroData.groups.forEach(group => {
                const groupLines = metroData.lines.filter(line => line.groupId === group.id);
                
                const groupElement = document.createElement('div');
                groupElement.className = 'bg-white rounded-xl overflow-hidden card-shadow';
                groupElement.innerHTML = `
                    <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                        <div class="flex items-center">
                            <i class="fa fa-folder-open-o text-primary mr-2"></i>
                            <h3 class="font-semibold text-lg">${group.name}</h3>
                            <span class="ml-2 px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">${groupLines.length} 条线路</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="add-line-to-group-btn flex items-center space-x-1 px-2 py-1 text-sm bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors" 
                                    data-group-id="${group.id}">
                                <i class="fa fa-plus-circle"></i>
                                <span>添加线路</span>
                            </button>
                            <button class="edit-group-btn p-1.5 text-gray-500 hover:text-primary transition-colors" data-group-id="${group.id}" title="编辑线路组">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="delete-group-btn p-1.5 text-gray-500 hover:text-danger transition-colors" data-group-id="${group.id}" title="删除线路组">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        ${groupLines.length > 0 ? `
                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                                ${groupLines.map(line => `
                                    <div class="line-card border border-gray-200 rounded-lg p-3 hover-lift cursor-pointer" 
                                         data-line-id="${line.id}" 
                                         data-group-id="${group.id}"
                                         style="border-left: 4px solid ${line.color}">
                                        <div class="flex justify-between items-start">
                                            <h4 class="font-medium">${line.name}</h4>
                                            <span class="w-3 h-3 rounded-full" style="background-color: ${line.color}"></span>
                                        </div>
                                        <div class="mt-2 text-sm text-gray-500">
                                            <p>车型: ${getCarTypeDisplay(line)}</p>
                                            <p>最高时速: ${line.maxSpeed} km/h</p>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        ` : `
                            <div class="text-center text-gray-500 py-6">
                                <p>该线路组暂无线路，点击"添加线路"添加</p>
                            </div>
                        `}
                    </div>
                `;
                
                groupsContainer.appendChild(groupElement);
            });

            // 添加线路卡片点击事件
            document.querySelectorAll('.line-card').forEach(card => {
                card.addEventListener('click', () => {
                    const lineId = card.getAttribute('data-line-id');
                    const groupId = card.getAttribute('data-group-id');
                    openLineEdit(lineId, groupId);
                });
            });

            // 添加线路组内的"添加线路"按钮事件
            document.querySelectorAll('.add-line-to-group-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const groupId = btn.getAttribute('data-group-id');
                    document.getElementById('new-line-name').value = '';
                    updateLineGroupSelect();
                    // 设置选中当前线路组
                    lineGroupSelect.value = groupId;
                    createLineModal.classList.remove('hidden');
                });
            });

            // 添加删除线路组事件
            document.querySelectorAll('.delete-group-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const groupId = btn.getAttribute('data-group-id');
                    const group = metroData.groups.find(g => g.id === groupId);
                    const groupLines = metroData.lines.filter(line => line.groupId === groupId);
                    
                    if (groupLines.length > 0) {
                        showToast('无法删除包含线路的线路组，请先删除线路组内的所有线路', 'error');
                        return;
                    }
                    
                    deleteTarget = { type: 'group', id: groupId };
                    document.getElementById('delete-confirm-message').textContent = 
                        `您确定要删除线路组"${group.name}"吗？此操作无法撤销。`;
                    confirmDeleteModal.classList.remove('hidden');
                });
            });

            // 添加编辑线路组事件
            document.querySelectorAll('.edit-group-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const groupId = btn.getAttribute('data-group-id');
                    const group = metroData.groups.find(g => g.id === groupId);
                    
                    document.getElementById('group-name').value = group.name;
                    createGroupForm.setAttribute('data-edit-group-id', groupId);
                    createGroupModal.classList.remove('hidden');
                });
            });

            // 更新线路组选择下拉框
            updateLineGroupSelect();
        }

        // 获取车厢型号显示文本
        function getCarTypeDisplay(line) {
            if (line.carType === 'custom' && line.customCarType) {
                return line.customCarType;
            }
            const carTypeMap = {
                'A': 'A型',
                'B': 'B型',
                'C': 'C型',
                'D': 'D型',
                'L': 'L型',
                'custom': '自定义'
            };
            return carTypeMap[line.carType] || line.carType;
        }

        // 更新创建线路按钮状态
        function updateCreateLineButtonState() {
            createLineBtn.disabled = metroData.groups.length === 0;
            if (metroData.groups.length === 0) {
                createLineBtn.classList.add('opacity-50', 'cursor-not-allowed');
            } else {
                createLineBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            }
        }

        // 更新线路组选择下拉框
        function updateLineGroupSelect() {
            lineGroupSelect.innerHTML = '';
            
            metroData.groups.forEach(group => {
                const option = document.createElement('option');
                option.value = group.id;
                option.textContent = group.name;
                lineGroupSelect.appendChild(option);
            });
        }

        // 打开线路编辑视图
        function openLineEdit(lineId, groupId) {
            const line = metroData.lines.find(l => l.id === lineId);
            const group = metroData.groups.find(g => g.id === groupId);
            
            if (!line || !group) return;
            
            currentLineId = lineId;
            currentGroupId = groupId;
            
            // 填充表单数据
            document.getElementById('line-id').value = line.id;
            document.getElementById('group-id').value = group.id;
            document.getElementById('line-name').value = line.name;
            document.getElementById('line-color').value = line.color;
            document.getElementById('line-color-text').value = line.color;
            document.getElementById('max-speed').value = line.maxSpeed;
            document.getElementById('operator').value = line.operator;
            
            // 车厢型号
            document.querySelectorAll('input[name="car-type"]').forEach(radio => {
                radio.checked = radio.value === line.carType;
            });
            
            // 自定义车厢型号
            if (line.carType === 'custom') {
                customCarTypeContainer.classList.remove('hidden');
                document.getElementById('custom-car-type').value = line.customCarType || '';
            } else {
                customCarTypeContainer.classList.add('hidden');
            }
            
            // 车厢数
            if (line.mixedTrain) {
                mixedTrainCheckbox.checked = true;
                mixedTrainCounts.classList.remove('hidden');
                singleTrainCount.classList.add('hidden');
                document.getElementById('car-count-1').value = line.carCount1 || '';
                document.getElementById('car-count-2').value = line.carCount2 || '';
            } else {
                mixedTrainCheckbox.checked = false;
                mixedTrainCounts.classList.add('hidden');
                singleTrainCount.classList.remove('hidden');
                document.getElementById('car-count').value = line.carCount || '';
            }
            
            // 更新导航路径
            document.getElementById('current-group-name').textContent = group.name;
            document.getElementById('current-line-name').textContent = line.name;
            
            // 切换视图
            homeView.classList.add('hidden');
            lineEditView.classList.remove('hidden');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        }

        // 返回主页
        function backToHome() {
            lineEditView.classList.add('hidden');
            homeView.classList.remove('hidden');
            currentLineId = null;
            currentGroupId = null;
        }

        // 显示通知提示
        function showToast(message, type = 'success') {
            toastMessage.textContent = message;
            
            if (type === 'success') {
                toastIcon.className = 'fa fa-check-circle text-success text-xl';
                toastNotification.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg bg-white text-success transform translate-y-0 opacity-100 transition-all duration-300 z-50 flex items-center space-x-2 max-w-xs';
            } else if (type === 'error') {
                toastIcon.className = 'fa fa-exclamation-circle text-danger text-xl';
                toastNotification.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg bg-white text-danger transform translate-y-0 opacity-100 transition-all duration-300 z-50 flex items-center space-x-2 max-w-xs';
            } else if (type === 'warning') {
                toastIcon.className = 'fa fa-exclamation-triangle text-warning text-xl';
                toastNotification.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg bg-white text-warning transform translate-y-0 opacity-100 transition-all duration-300 z-50 flex items-center space-x-2 max-w-xs';
            }
            
            setTimeout(() => {
                toastNotification.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center space-x-2 max-w-xs';
            }, 3000);
        }

        // 生成唯一ID
        function generateId() {
            return Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
        }

        // 导出线路为JSON
        function exportLineJson(lineId) {
            const line = metroData.lines.find(l => l.id === lineId);
            const group = metroData.groups.find(g => g.id === line.groupId);
            
            if (!line) return;
            
            // 构建符合要求的JSON结构，确保每个字段都是"":""格式
            const lineData = {
                "id": line.id || "",
                "name": line.name || "",
                "groupId": line.groupId || "",
                "groupName": group ? group.name : "",
                "color": line.color || "",
                "carType": line.carType || "",
                "customCarType": line.customCarType || "",
                "carCount": line.carCount ? line.carCount.toString() : "",
                "mixedTrain": line.mixedTrain ? "true" : "false",
                "carCount1": line.carCount1 ? line.carCount1.toString() : "",
                "carCount2": line.carCount2 ? line.carCount2.toString() : "",
                "maxSpeed": line.maxSpeed ? line.maxSpeed.toString() : "",
                "operator": line.operator || ""
            };
            
            const jsonStr = JSON.stringify(lineData, null, 2);
            const blob = new Blob([jsonStr], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = `${line.name || '线路'}_属性.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            showToast(`线路"${line.name}"已导出为JSON`);
        }

        // 导入数据 - 现在只支持导入单个线路
        function importData() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.json';
            
            input.onchange = e => {
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = event => {
                    try {
                        const importedData = JSON.parse(event.target.result);
                        
                        // 验证是否为单个线路数据
                        if (!importedData.name || !importedData.groupName) {
                            throw new Error('无效的线路数据格式');
                        }
                        
                        // 检查线路组是否存在，不存在则创建
                        let groupId = null;
                        const existingGroup = metroData.groups.find(g => g.name === importedData.groupName);
                        
                        if (existingGroup) {
                            groupId = existingGroup.id;
                        } else {
                            // 创建新线路组
                            const newGroup = {
                                id: generateId(),
                                name: importedData.groupName
                            };
                            metroData.groups.push(newGroup);
                            groupId = newGroup.id;
                            showToast(`已创建新线路组: ${importedData.groupName}`);
                        }
                        
                        // 创建新线路
                        const newLine = {
                            id: generateId(),
                            name: importedData.name || '',
                            groupId: groupId,
                            color: importedData.color || '#165DFF',
                            carType: importedData.carType || 'A',
                            customCarType: importedData.customCarType || '',
                            carCount: importedData.carCount ? parseInt(importedData.carCount) : 6,
                            mixedTrain: importedData.mixedTrain === 'true',
                            carCount1: importedData.carCount1 ? parseInt(importedData.carCount1) : '',
                            carCount2: importedData.carCount2 ? parseInt(importedData.carCount2) : '',
                            maxSpeed: importedData.maxSpeed ? parseInt(importedData.maxSpeed) : 80,
                            operator: importedData.operator || ''
                        };
                        
                        metroData.lines.push(newLine);
                        saveData();
                        renderGroups();
                        showToast(`线路"${newLine.name}"已导入`);
                    } catch (error) {
                        showToast(`导入失败: ${error.message}`, 'error');
                    }
                };
                reader.readAsText(file);
            };
            
            input.click();
        }

        // 清空所有数据
        function clearAllData() {
            if (metroData.groups.length === 0 && metroData.lines.length === 0) {
                showToast('没有可清空的数据', 'warning');
                return;
            }
            
            deleteTarget = { type: 'clear' };
            document.getElementById('delete-confirm-message').textContent = 
                '确定要清空所有数据吗？此操作无法撤销。';
            confirmDeleteModal.classList.remove('hidden');
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 创建线路组按钮
            createGroupBtn.addEventListener('click', () => {
                createGroupForm.reset();
                createGroupForm.removeAttribute('data-edit-group-id');
                createGroupModal.classList.remove('hidden');
            });
            
            // 关闭线路组模态框
            closeGroupModal.addEventListener('click', () => {
                createGroupModal.classList.add('hidden');
            });
            
            cancelGroupBtn.addEventListener('click', () => {
                createGroupModal.classList.add('hidden');
            });
            
            // 创建线路组表单提交
            createGroupForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const groupName = document.getElementById('group-name').value.trim();
                const editGroupId = createGroupForm.getAttribute('data-edit-group-id');
                
                if (!groupName) {
                    showToast('线路组名称不能为空', 'error');
                    return;
                }
                
                if (editGroupId) {
                    // 编辑现有线路组
                    const groupIndex = metroData.groups.findIndex(g => g.id === editGroupId);
                    if (groupIndex !== -1) {
                        metroData.groups[groupIndex].name = groupName;
                        saveData();
                        renderGroups();
                        createGroupModal.classList.add('hidden');
                        showToast(`线路组"${groupName}"已更新`);
                    }
                } else {
                    // 创建新线路组
                    const newGroup = {
                        id: generateId(),
                        name: groupName
                    };
                    
                    metroData.groups.push(newGroup);
                    saveData();
                    renderGroups();
                    createGroupModal.classList.add('hidden');
                    showToast(`线路组"${groupName}"已创建`);
                }
            });
            
            // 创建线路按钮
            createLineBtn.addEventListener('click', () => {
                document.getElementById('new-line-name').value = '';
                updateLineGroupSelect();
                createLineModal.classList.remove('hidden');
            });
            
            // 关闭线路模态框
            closeLineModal.addEventListener('click', () => {
                createLineModal.classList.add('hidden');
            });
            
            cancelLineBtn.addEventListener('click', () => {
                createLineModal.classList.add('hidden');
            });
            
            // 创建线路表单提交
            createLineForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const lineName = document.getElementById('new-line-name').value.trim();
                const groupId = lineGroupSelect.value;
                
                if (!lineName) {
                    showToast('线路名称不能为空', 'error');
                    return;
                }
                
                if (!groupId) {
                    showToast('请选择线路组', 'error');
                    return;
                }
                
                const newLine = {
                    id: generateId(),
                    name: lineName,
                    groupId: groupId,
                    color: '#165DFF',
                    carType: 'A',
                    customCarType: '',
                    carCount: 6,
                    mixedTrain: false,
                    carCount1: '',
                    carCount2: '',
                    maxSpeed: 80,
                    operator: ''
                };
                
                metroData.lines.push(newLine);
                saveData();
                renderGroups();
                createLineModal.classList.add('hidden');
                showToast(`线路"${lineName}"已创建`);
                
                // 打开新创建的线路进行编辑
                openLineEdit(newLine.id, groupId);
            });
            
            // 返回主页
            backToHomeBtn.addEventListener('click', backToHome);
            cancelEditBtn.addEventListener('click', backToHome);
            
            // 线路表单提交
            lineForm.addEventListener('submit', (e) => {
                e.preventDefault();
                
                if (!currentLineId || !currentGroupId) return;
                
                const lineIndex = metroData.lines.findIndex(l => l.id === currentLineId);
                if (lineIndex === -1) return;
                
                // 获取表单数据
                const lineData = {
                    id: currentLineId,
                    name: document.getElementById('line-name').value.trim(),
                    groupId: currentGroupId,
                    color: document.getElementById('line-color').value,
                    carType: document.querySelector('input[name="car-type"]:checked').value,
                    customCarType: document.getElementById('custom-car-type').value.trim(),
                    mixedTrain: mixedTrainCheckbox.checked,
                    maxSpeed: parseInt(document.getElementById('max-speed').value),
                    operator: document.getElementById('operator').value.trim()
                };
                
                // 车厢数
                if (lineData.mixedTrain) {
                    lineData.carCount1 = parseInt(document.getElementById('car-count-1').value);
                    lineData.carCount2 = parseInt(document.getElementById('car-count-2').value);
                    lineData.carCount = '';
                } else {
                    lineData.carCount = parseInt(document.getElementById('car-count').value);
                    lineData.carCount1 = '';
                    lineData.carCount2 = '';
                }
                
                // 验证必填字段
                if (!lineData.name) {
                    showToast('线路名称不能为空', 'error');
                    return;
                }
                
                if (!lineData.maxSpeed || isNaN(lineData.maxSpeed) || lineData.maxSpeed <= 0) {
                    showToast('请输入有效的最高运营时速', 'error');
                    return;
                }
                
                if (!lineData.operator) {
                    showToast('请输入运营公司名称', 'error');
                    return;
                }
                
                if (lineData.carType === 'custom' && !lineData.customCarType) {
                    showToast('请输入自定义车厢型号', 'error');
                    return;
                }
                
                if (!lineData.mixedTrain) {
                    if (!lineData.carCount || isNaN(lineData.carCount) || lineData.carCount <= 0) {
                        showToast('请输入有效的车厢数量', 'error');
                        return;
                    }
                } else {
                    if ((!lineData.carCount1 || isNaN(lineData.carCount1) || lineData.carCount1 <= 0) ||
                        (!lineData.carCount2 || isNaN(lineData.carCount2) || lineData.carCount2 <= 0)) {
                        showToast('请输入有效的混跑车厢数量', 'error');
                        return;
                    }
                }
                
                // 更新线路数据
                metroData.lines[lineIndex] = { ...metroData.lines[lineIndex], ...lineData };
                saveData();
                renderGroups();
                backToHome();
                showToast(`线路"${lineData.name}"已更新`);
            });
            
            // 删除线路按钮
            deleteLineBtn.addEventListener('click', () => {
                if (!currentLineId) return;
                
                const line = metroData.lines.find(l => l.id === currentLineId);
                if (!line) return;
                
                deleteTarget = { type: 'line', id: currentLineId };
                document.getElementById('delete-confirm-message').textContent = 
                    `您确定要删除线路"${line.name}"吗？此操作无法撤销。`;
                confirmDeleteModal.classList.remove('hidden');
            });
            
            // 取消删除
            cancelDeleteBtn.addEventListener('click', () => {
                confirmDeleteModal.classList.add('hidden');
                deleteTarget = null;
            });
            
            // 确认删除
            confirmDeleteBtn.addEventListener('click', () => {
                if (!deleteTarget) return;
                
                if (deleteTarget.type === 'line') {
                    // 删除线路
                    const lineIndex = metroData.lines.findIndex(l => l.id === deleteTarget.id);
                    if (lineIndex !== -1) {
                        const lineName = metroData.lines[lineIndex].name;
                        metroData.lines.splice(lineIndex, 1);
                        saveData();
                        renderGroups();
                        backToHome();
                        showToast(`线路"${lineName}"已删除`);
                    }
                } else if (deleteTarget.type === 'group') {
                    // 删除线路组
                    const groupIndex = metroData.groups.findIndex(g => g.id === deleteTarget.id);
                    if (groupIndex !== -1) {
                        const groupName = metroData.groups[groupIndex].name;
                        metroData.groups.splice(groupIndex, 1);
                        saveData();
                        renderGroups();
                        updateCreateLineButtonState();
                        showToast(`线路组"${groupName}"已删除`);
                    }
                } else if (deleteTarget.type === 'clear') {
                    // 清空所有数据
                    metroData = { groups: [], lines: [] };
                    localStorage.removeItem('metroLineData');
                    renderGroups();
                    updateCreateLineButtonState();
                    showToast('所有数据已清空');
                }
                
                confirmDeleteModal.classList.add('hidden');
                deleteTarget = null;
            });
            
            // 导出线路JSON
            exportLineBtn.addEventListener('click', () => {
                if (currentLineId) {
                    exportLineJson(currentLineId);
                }
            });
            
            // 颜色选择器同步
            lineColorInput.addEventListener('input', () => {
                lineColorTextInput.value = lineColorInput.value;
            });
            
            lineColorTextInput.addEventListener('input', () => {
                // 简单验证颜色格式
                const colorRegex = /^#([0-9A-F]{3}){1,2}$/i;
                if (colorRegex.test(lineColorTextInput.value)) {
                    lineColorInput.value = lineColorTextInput.value;
                }
            });
            
            // 自定义车厢型号显示控制
            document.querySelectorAll('input[name="car-type"]').forEach(radio => {
                radio.addEventListener('change', () => {
                    if (carTypeCustomRadio.checked) {
                        customCarTypeContainer.classList.remove('hidden');
                    } else {
                        customCarTypeContainer.classList.add('hidden');
                    }
                });
            });
            
            // 混跑选项控制
            mixedTrainCheckbox.addEventListener('change', () => {
                if (mixedTrainCheckbox.checked) {
                    mixedTrainCounts.classList.remove('hidden');
                    singleTrainCount.classList.add('hidden');
                } else {
                    mixedTrainCounts.classList.add('hidden');
                    singleTrainCount.classList.remove('hidden');
                }
            });
            
            // 导入数据
            importBtn.addEventListener('click', importData);
            mobileImportBtn.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                importData();
            });
            
            // 清空所有数据
            clearAllBtn.addEventListener('click', clearAllData);
            mobileClearAllBtn.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                clearAllData();
            });
            
            // 移动端菜单切换
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
            
            // 点击模态框外部关闭
            createGroupModal.addEventListener('click', (e) => {
                if (e.target === createGroupModal) {
                    createGroupModal.classList.add('hidden');
                }
            });
            
            createLineModal.addEventListener('click', (e) => {
                if (e.target === createLineModal) {
                    createLineModal.classList.add('hidden');
                }
            });
            
            confirmDeleteModal.addEventListener('click', (e) => {
                if (e.target === confirmDeleteModal) {
                    confirmDeleteModal.classList.add('hidden');
                    deleteTarget = null;
                }
            });
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', init);
    </script>


    </body></html>
\ No newline at end of file